<template>
  <div class="guro-setting">
    <div class="guro-setting__title">
      群名
    </div>
    <div class="guro-setting__name">{{ group.name }}</div>
    <el-input class="guro-setting__search" v-model="search" placeholder="搜索..."/>
    <div class="guro-setting__body">
      <div class="guro-setting__body__card" v-for="(info, index) in userList" :key="index">
        <el-avatar :size="34" :src="info.avatar">
        </el-avatar>
        <span>{{ info.name ? info.name : info.nickName }}</span>
      </div>
    </div>
    <!-- <div class="guro-setting__footer">
      <el-button type="danger" round plain @click="out">退出</el-button>
    </div> -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import _ from 'lodash'
// import { getChatRoomInfo } from '../../../api/Group'
export default {
  data () {
    return {
      search: ''
    }
  },
  computed: {
    ...mapState('app', ['roomId', 'groupList', 'chatRoomInfo']),
    group: function () {
      const index = _.findIndex(this.groupList, e => e.roomId + '' === this.roomId)
      return this.groupList[index]
    },
    userList: function () {
      if (this.search !== '') {
        return _.compact(_.map(this.chatRoomInfo[this.roomId].data, e => {
          const reg = new RegExp(this.search)
          if (!e.delFlag && (reg.test(e.name) || reg.test(e.nickName))) {
            return e
          }
        }))
      } else {
        let temp = []
        for (let i = 0; i < this.chatRoomInfo[this.roomId].data.length; i++) {
          if (!this.chatRoomInfo[this.roomId].data[i].delFlag) {
            temp.push(this.chatRoomInfo[this.roomId].data[i])
          }
        }
        return temp
      }
    }
  },
  methods: {
    out () {
      this.$emit('handleClose')
    }
  },
  created () {
    // if (this.group && _.isUndefined(this.chatRoomInfo[this.roomId])) {
    //   getChatRoomInfo(this.roomId).then(res => {
    //     const _temp = _.cloneDeep(this.chatRoomInfo)
    //     _temp[this.roomId] = res
    //     this.$store.dispatch('app/setChatRoomInfo', _temp)
    //   })
    // }
  },
  watch: {
    roomId: {
      handler (data, olddata) {
        // const that = this
        if (this.group && _.isUndefined(this.chatRoomInfo[data])) {
          // getChatRoomInfo(data).then(res => {
          //   const _temp = _.cloneDeep(that.chatRoomInfo)
          //   _temp[data] = res
          //   that.$store.dispatch('app/setChatRoomInfo', _temp)
          // })
        }
        if (data !== olddata) {
          this.out()
        }
      }
    }
  }
}
</script>

<style lang="scss">
.guro-setting {
  width: 270px;
  height: 525px;
  position: absolute;
  right: 0px;
  top: 52px;
  background:rgba(255,255,255,1);
  box-shadow:0px 3px 20px 0px rgba(0, 0, 0, 0.08);
  border-radius:0px 0px 12px 0px;
  padding: 23px 20px;
  z-index: 100;
  &__title {
    font-size: 16px;
    font-weight:500;
    color:rgba(153,153,153,1);
  }
  &__name {
    margin-top: 9px;
    font-weight: 500px;
    font-size: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 275px;
  }
  &__search {
    .el-input__inner {
      border-radius: 20px;
      background-color: #f5f5f5;
    }
    margin-bottom: 10px;
  }
  &__body {
    overflow: auto;
    height: 422px;
    margin-right: -20px;
    margin-bottom: 10px;
    &__card {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      span {
        margin-right: 11px;
        max-width: 218px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  &__footer {
    display: flex;
    justify-content: center;
  }
}
</style>
